{% autoescape off %}
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/static/css/tcal.css" />
	<script type="text/javascript" src="/static/js/tcal.js"></script> 
    <title>应用配置管理系统</title>
</head>
<body>
    
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div style = "margin: 0; font-size: 11px; text-align: right; color: #487858;">
		<a href="/update_db_from_work/">刷新</a> |
	</div>
    <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <th scope="col">
    <form action="/baseline_date_search/" method="get">
		<input type="text" name="query" class="tcal" value="" />
		<input type="submit" value="按时间搜索">
	</form></th>
     <th scope="col">
	<form action="/baseline_sysver_search/" method="get">
		<input type="text" name="query">
		<input type="submit" value="按系统版本">
	</form></th>
	<th scope="col">
	<a href='/count_cm_baseline/', style='color:blue;'>升级统计
	</a></th>
    </tr>
    </table>

    <div id="main" style="height:600px"></div>
    <!-- ECharts单文件引入 -->
    
    <script src="/static/js/echarts.js"></script>
    
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '/static/js/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line' // 加载line模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
		
        
        var option = {
     title : {
        text: '系统基线图',
        subtext: '基线基准时间：{{need_date_time}}'
    },
    tooltip : {
        
        trigger: 'axis',
        formatter: function (params,ticket,callback) {
            console.log(params)
            var res = "<p>"+params[0].name+"</p>"+
            "<table border='1'><tr><th>基线信息</th><th>升级时间</th><th>应用版本</th><th>补丁号</th><th>升级步骤页数</th><th>升级耗时</th><th>基线号</th><th>升级环境</th><th>升级操作人</th></tr>" ;
            for (var i = 0, l = params.length; i < l; i++) {
                res += "<tr><th>"+params[i].seriesName+
                "</th><th>"+params[i].data.升级时间+
                "</th><th>"+params[i].data.应用版本+
                "</th><th>"+params[i].data.补丁号+
                "</th><th>"+params[i].data.升级步骤页数+
                "</th><th>"+params[i].data.升级耗时+
                "</th><th>"+params[i].data.基线号+
                "</th><th>"+params[i].data.升级环境+
                "</th><th>"+params[i].data.升级操作人+
                "</th></tr>";
            }
            res += "</table>";
            setTimeout(function (){
                // 仅为了模拟异步回调
                callback(ticket, res);
            }, 200)
            return 'loading';
        }
    },
    legend: {
        data:['当前版本','前驱版本','后继版本']
    },
    toolbox: {
        show : true,
        feature : {
            dataZoom : {show: true},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom: {
        show: true,
        start : 0,
        end : 20
    },
    calculable : true,
   
    xAxis : [
        {
            scale : true ,
            type : 'category',
            boundaryGap : false,
            axisLine : {
                show : false   
            },
            axisLabel : {
                show:true,
                interval: '0',    // {number}
                rotate: 30,
                margin: -86,
                textStyle: {
                    color: 'black',
                    fontFamily: 'sans-serif',
                    fontSize: 13,
                    fontStyle: 'normal',
                    fontWeight: 900
                }
            },
            axisTick : {
                show : false   
            },
            splitLine : {
                show : false   
            },
            data : [
            {% for app_name in app_name_list %}
				'{{ app_name }}',
            {% endfor %}
            ]
        }
    ],
    yAxis : [
        {
            type : 'time',
            
            scale : true ,
            
            {% if min_time %}
            min : {{min_time}},
            max : {{max_time}},
            {% endif %}
            
            boundaryGap : false,
            axisLine : {
                show : false   
            },
            splitNumber: 10 ,
            splitLine : {
                show : false   
            },
            
        }
    ],
    series : [
        {
            name:'当前版本',
            type:'line',
            
            data:[
            {% for base_line in baseline_info_list %}
				{{ base_line }},
            {% endfor %}     
            ],
	        markPoint : {
	            symbol: 'emptyCircle',
	            effect : {
                    show: true,
                    shadowBlur : 0
                },
	            data : [
	            {% for mark_point in this_mark_point_info_list %}
					{{ mark_point }},
	            {% endfor %} 
	            ]
	        },

        },
       {
            name:'前驱版本',
            type:'line',
            data:[
            {% for old_line in oldline_info_list %}
				{{ old_line }},
            {% endfor %}              
            ],
            markPoint : {
                symbol: 'emptyCircle',
	            effect : {
                    show: true,
                    shadowBlur : 0
                },
	            data : [
	            {% for mark_point in old_mark_point_info_list %}
					{{ mark_point }},
	            {% endfor %} 
	            ]
	        },
           
        },
       {
            name:'后继版本',
            type:'line',
            data:[
            {% for new_line in newline_info_list %}
				{{ new_line }},
            {% endfor %}              
            ],
            markPoint : {
                symbol: 'emptyCircle',
	            effect : {
                    show: true,
                    shadowBlur : 0
                },
	            data : [
	            
	            {% for mark_point in new_mark_point_info_list %}
					{{ mark_point }},
	            {% endfor %} 
				
	            ]
	        },
           
        }        
    ]
};

var ecConfig = require('echarts/config');
function eConsole(param) {
	var nodeName = param.name;
	nodeName = nodeName.replace("\t","|");
	jumpN ='/{{jump_to}}_'+nodeName+'/';
	window.location.href='/{{jump_to}}_'+nodeName+'/';
}

        // 为echarts对象加载数据 

		
		myChart.setOption(option);
		
		myChart.on(ecConfig.EVENT.CLICK, eConsole);
		myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
		//myChart.on(ecConfig.EVENT.HOVER, eConsole);
		myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
		myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
		myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
		myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
		
		}
		);
		
	
	
    </script>
    <div style = "margin: 0; font-size: 11px; text-align: right; color: #487858;">
	    <a href="/upload_file/">| 文件上传</a> |
		<a href="/system_detail/">系统详情页</a> |
		<a href="/version_detail/">版本详情页</a> |
		<a href="/wiki_index/">系统百科页</a> |
		<a href="/dataex_detail/">交互信息展示页</a> |
		<a href="/cm_baseline/">基线展示页</a> |
		<a href="/cm_bi_index/">报表展示页</a> |
		<a href="/test_report_index/">测试周报页</a> |
	</div>
</body>
{% endautoescape %}